<template>
  <div class="navbar">
    <!-- 左侧品牌 -->
    <div class="brand">
      <img
        src="@/assets/images/logo.png"
        alt="JEWELRY STORE"
        class="logo"
        @click.prevent="goHome"
      >
    </div>

    <!-- 中间导航 -->
    <div class="nav-menu">
      <a href="#" class="nav-item" @click.prevent="goHome">HOME</a>
      <a href="#" class="nav-item" @click.prevent="handleNavClick('scroll', 'NewProductsSection')">New PRODUCTS</a>
      <a href="#" class="nav-item" @click.prevent="handleNavClick('scroll', 'TodayDeal')">TODAY DEAL'S</a>
      <a href="#" class="nav-item" @click.prevent="handleNavClick('scroll', 'FearuredProductsSection')">FEATURED PRODUCTS</a>
      <!-- <a href="#" class="nav-item" @click.prevent="handleNavClick('showAll')">ALL PRODUCTS</a> -->

      <el-dropdown placement="bottom" trigger="hover" @command="handleCategoryCommand">
        <span class="nav-item dropdown-tiger" @click.prevent="handleNavClick('showAll')">
          ALL PRODUCTS
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="category in categoryList"
              :key="category.id"
              :command="category.id"
            >
              {{ category.name }}
            </el-dropdown-item>
        </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <!-- 右侧图标 -->
    <!-- <div class="nav-icons">
      <el-icon><Search /></el-icon>
      <el-icon><ShoppingCart /></el-icon>
      <el-icon><User /></el-icon>
    </div> -->
  </div>
</template>

<script setup>
// import { Search, ShoppingCart, User } from '@element-plus/icons-vue'
// import { ElIcon } from 'element-plus'
// import { nextTick } from 'vue'
import emitter from '@/utils/emitter'
import { nextTick, onMounted, ref } from 'vue'
import { getCategories } from '@/api/category.js'

const categoryList = ref([])// 分类列表变量

onMounted(function () {
  getCategoryList()
})
/* 查询 */
function getCategoryList(){
  getCategories().then((response) => {
    categoryList.value = response.data || []
    console.log('获取分类成功：', categoryList.value)
  }).catch((error) =>{
    console.log('获取分类失败', error)
  })
}

const handleCategoryCommand = (categoryId) => {
  emitter.emit('filter-category', categoryId)
}

//跳转到首页的方法
const goHome = () => {
  window.location.href = '/' // 跳转到网站根路径（首页）
}

const handleNavClick = (type, className) => {
  const isHomePage = window.location.href.indexOf('/#/index') !== -1
  // console.log(window.location.pathname)
  if(!isHomePage){
    // 情况1：不在首页 → 跳回首页，并携带指令参数（scrollTo/showAllProducts）
    window.location.href = `/`
    if(type === 'scroll'){
      // nextTick(() => {
      //   emitter.emit('hide-all-products-and-scroll', className)
      // })
      setTimeout(() => {
        emitter.emit('hide-all-products-and-scroll', className)
      }, 2000)
    }else if(type === 'showAll'){
      nextTick(() => {
        emitter.emit('show-all-products')
      })
    }
  } else {
    // 情况2：已在首页 → 通过事件总线通知首页执行对应操作
    if(type === 'scroll'){
      emitter.emit('hide-all-products-and-scroll', className)
    }else if (type === 'showAll'){
      emitter.emit('show-all-products')
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 40px;
  border-bottom: 1px solid #f0f0f0;
}
/* 左侧品牌 */
.brand {
  display: flex;
  align-items: center;
  margin-top: 0px;
  margin-left: -40px;
  cursor: pointer;
}
.logo {
  width: 160px;
  height: 36px;
  object-fit: contain;
}
/* 中间导航 */
.nav-menu {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center;
}
.nav-item {
  color: #333;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 600;
  transition: color 0.3s;
  margin-bottom: 2px;
  align-items: center; /* 文字垂直居中 */
  cursor: pointer;
}
.nav-item:hover {
  color: #BEAE59;
}
:deep(.el-dropdown-menu) {
  border: none !important;
  box-shadow: none !important;
}
:deep(.el-dropdown-menu__item:hover) {
  background-color: transparent !important; /* 取消悬停背景 */
  border: none !important; /* 确保悬停时无框 */
  color: #BEAE59 !important;
}
.nav-item:hover {
  border: none !important;
  outline: none !important; /* 去除聚焦时的外边框 */
}
/* 右侧图标 */
.nav-icons {
  display: flex;
  gap: 25px;
  align-items: center;
  margin-top: 0px;
  margin-right: -20px;
}
.nav-icons .el-icon {
  font-size: 20px;
  color: #333;
  cursor: pointer;
  transition: color 0.3s;
}
.nav-icons .el-icon:hover {
  color: #BEAE59;
}

/* 手机适配 */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  .nav-menu {
    width: 100%;
    justify-content: flex-start;
  }
}
</style>
